<template>
  <div class="form-container">
    <el-form :model="formData" ref="formRef">
      <!-- 头像上传 -->
      <el-form-item label="头像" style="justify-content: center; display: flex; align-items: center;" label-width="80">
        <Upload :src="formData.avatarUrl"
                :previewImage="previewImage"
                :handleAvatarChange="handleAvatarChange"/>
      </el-form-item>

      <!-- 其他表单字段 -->
      <el-form-item label="用户名" label-width="80">
        <el-input v-model="formData.username" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="80">
        <el-input v-model="formData.password" show-password style="width: 80%" placeholder="留空为不修改密码"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" label-width="80">
        <el-input v-model="formData.email" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="手机号" label-width="80">
        <el-input v-model="formData.phone" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="状态" label-width="80">
        <el-radio-group v-model="formData.userStatus">
          <el-radio-button label="启用" :value="0"/>
          <el-radio-button label="停用" :value="1"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="角色" label-width="80">
        <el-radio-group v-model="formData.userRole">
          <el-radio-button label="普通用户" :value="0"/>
          <el-radio-button label="VIP用户" :value="1"/>
          <el-radio-button label="管理员" :value="2"/>
          <el-radio-button label="运营员" :value="3"/>
          <el-radio-button label="超级管理" :value="4"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" label-width="80">
        <el-input v-model="formData.remark" style="width: 80%"></el-input>
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item style="float: right">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import {PostFileUserImg} from "@/api/file.js";
import {PostUserAdd, PostUserUpdate} from "@/api/user.js";
import Upload from "@/components/Upload.vue";

const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  dialog:{
    type: String,
  }
});

const emit = defineEmits(['submit']);

// 表单引用
const formRef = ref(null);
// 预览图片
const previewImage = ref('');

// 处理头像选择变化
const handleAvatarChange = async (file) => {
  // 验证文件类型
  const isImage = file.raw.type.startsWith('image/');
  if (!isImage) {
    ElMessage.error('请上传图片文件!');
    return false;
  }

  // 验证文件大小
  const isLt2M = file.raw.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!');
    return false;
  }

  const response = await PostFileUserImg(file.raw);
  if(response.data.code !== 200){
    ElMessage.error(response.data.message);
    return;
  }
  props.formData.avatarUrl = response.data.data;

  // 创建预览图
  const reader = new FileReader();
  reader.onload = (e) => {
    previewImage.value = e.target.result;
  };
  reader.readAsDataURL(file.raw);

  return false; // 阻止自动上传
};

// 重置表单
const handleReset = () => {
  formRef.value.resetFields();
  previewImage.value = '';
};

// 确认表单
const handleConfirm = async () => {
      if(props.formData.username !== null|| props.formData.username !== ""){
        //编辑用户信息
        const res = await PostUserUpdate(props.formData);
        if(res.code === 200){
          emit('submit', props.formData);
        }
      }else{
        //添加用户信息
        if(props.formData.avatarUrl == null){
          props.formData.avatarUrl = "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
        }
        const res = await PostUserAdd(props.formData);
        if(res.code === 200){
          emit('submit', props.formData);
        }
      }
};
</script>
<style>
.avatar-uploader{
  width: 120px;
  height: 120px;
}
.form-container {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}

.el-image {
  display: block;
  margin: 0 auto;
}
</style>
